<template>
    <div style="height: 100vh;">
        <div class="body_statistics">
            <!-- 头部 -->
            <van-sticky>
                <!-- <div class="heard">
                    <span class="title">总金额（元）</span>
                    <div class="money">
                        <span class="money_num" ref="moneyRef">{{ formatMoneyNum(485936.98, 1) }}</span>
                    </div>
                </div> -->
                <div class="card_item" :style="{ background: 'linear-gradient(145deg, #3eb575 0%, #b98d14 100%)' }">
                    <!-- 顶部 照片 名字 -->
                    <div class="card_top">
                        <div class="card_top_img">
                            <img src="@/assets/touxiang.png" alt="">
                        </div>
                        <div class="card_top_name">
                            <span class="card_top_name_name">总金额</span>
                            <div class="totalcount">
                                <span class="totaltitle">总计：</span>
                                <span class="number">{{ formatMoneyNum(98) }}元</span>
                            </div>
                        </div>

                    </div>
                    <div class="total">
                        <div class="totalcount">
                            <span class="totaltitle">支出：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                        <div class="totalcount">
                            <span class="totaltitle">收入：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                    </div>
                </div>
            </van-sticky>
            <!-- 身体 -->
            <div class="card_list">
                <div class="card_item" :style="{ background: 'linear-gradient(145deg, #3eb575 0%, #b98d14 100%)' }">
                    <!-- 顶部 照片 名字 -->
                    <div class="card_top">
                        <div class="card_top_img">
                            <img src="@/assets/touxiang.png" alt="">
                        </div>
                        <div class="card_top_name">
                            <span class="card_top_name_name">张三</span>
                            <div class="totalcount">
                                <span class="totaltitle">总计：</span>
                                <span class="number">{{ formatMoneyNum(98) }}元</span>
                            </div>
                        </div>

                    </div>
                    <div class="total">
                        <div class="totalcount">
                            <span class="totaltitle">支出：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                        <div class="totalcount">
                            <span class="totaltitle">收入：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                    </div>
                </div>
                <div class="card_item" :style="{ background: 'linear-gradient(145deg, #3eb575 0%, #b98d14 100%)' }">
                    <!-- 顶部 照片 名字 -->
                    <div class="card_top">
                        <div class="card_top_img">
                            <img src="@/assets/touxiang.png" alt="">
                        </div>
                        <div class="card_top_name">
                            <span class="card_top_name_name">张三</span>
                            <div class="totalcount">
                                <span class="totaltitle">总计：</span>
                                <span class="number">{{ formatMoneyNum(98) }}元</span>
                            </div>
                        </div>

                    </div>
                    <div class="total">
                        <div class="totalcount">
                            <span class="totaltitle">支出：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                        <div class="totalcount">
                            <span class="totaltitle">收入：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                    </div>
                </div>
                <div class="card_item" :style="{ background: 'linear-gradient(145deg, #3eb575 0%, #b98d14 100%)' }">
                    <!-- 顶部 照片 名字 -->
                    <div class="card_top">
                        <div class="card_top_img">
                            <img src="@/assets/touxiang.png" alt="">
                        </div>
                        <div class="card_top_name">
                            <span class="card_top_name_name">张三</span>
                            <div class="totalcount">
                                <span class="totaltitle">总计：</span>
                                <span class="number">{{ formatMoneyNum(98) }}元</span>
                            </div>
                        </div>

                    </div>
                    <div class="total">
                        <div class="totalcount">
                            <span class="totaltitle">支出：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                        <div class="totalcount">
                            <span class="totaltitle">收入：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                    </div>
                </div>
                <div class="card_item" :style="{ background: 'linear-gradient(145deg, #3eb575 0%, #b98d14 100%)' }">
                    <!-- 顶部 照片 名字 -->
                    <div class="card_top">
                        <div class="card_top_img">
                            <img src="@/assets/touxiang.png" alt="">
                        </div>
                        <div class="card_top_name">
                            <span class="card_top_name_name">张三</span>
                            <div class="totalcount">
                                <span class="totaltitle">总计：</span>
                                <span class="number">{{ formatMoneyNum(98) }}元</span>
                            </div>
                        </div>

                    </div>
                    <div class="total">
                        <div class="totalcount">
                            <span class="totaltitle">支出：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                        <div class="totalcount">
                            <span class="totaltitle">收入：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                    </div>
                </div>
                <div class="card_item" :style="{ background: 'linear-gradient(145deg, #3eb575 0%, #b98d14 100%)' }">
                    <!-- 顶部 照片 名字 -->
                    <div class="card_top">
                        <div class="card_top_img">
                            <img src="@/assets/touxiang.png" alt="">
                        </div>
                        <div class="card_top_name">
                            <span class="card_top_name_name">张三</span>
                            <div class="totalcount">
                                <span class="totaltitle">总计：</span>
                                <span class="number">{{ formatMoneyNum(98) }}元</span>
                            </div>
                        </div>

                    </div>
                    <div class="total">
                        <div class="totalcount">
                            <span class="totaltitle">支出：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                        <div class="totalcount">
                            <span class="totaltitle">收入：</span>
                            <span class="number">{{ formatMoneyNum(98) }}元</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 添加账户按钮 -->
            <van-floating-bubble axis="xy" icon="cash-back-record-o" magnetic="x" @click="showDia = true" />
            <van-popup v-model:show="showDia" position="bottom" :style="{ padding: '15px', height: '60%' }" round>
                <AddCardVue v-if="showDia" @successAdd="successAdd" />
            </van-popup>
        </div>
        <LayoutIndex />
    </div>
</template>

<script setup>
import { ref, onUnmounted } from "vue"
import LayoutIndex from "./layout/Index.vue"
import AddCardVue from '@/views/account/AddCardVue.vue'


const moneyRef = ref(null)
const intervalId = ref(null)
// 格式化钱
const formatMoneyNum = (num, type) => {
    if (type == 1) {
        updateMoney(0, num)
    }
    else {
        const options = {
            style: 'currency',
            currency: 'CNY',
        };
        return num.toLocaleString("zh-CN", options);
    }
}
// 更新金额的函数，包含滚动动画  
const updateMoney = (oldVal, newVal) => {
    // 初始化当前值  
    let currentValue = parseInt(oldVal, 10);
    // 创建定时器，逐步增加或减少金额  
    intervalId.value = setInterval(() => {
        if (currentValue !== newVal) {
            const type = Math.sign(newVal - currentValue); // 根据方向增加或减少1  
            // 生成一个当前值与最终值之间的随机数
            const randomNum = Math.floor(Math.random() * Math.abs(newVal - currentValue));
            if (type === 1) {
                currentValue += randomNum;
            } else {
                currentValue -= randomNum;
            }
            const options = {
                style: 'currency',
                currency: 'CNY',
            };
            moneyRef.value.textContent = currentValue.toLocaleString("zh-CN", options); // 格式化为带千位分隔符的数字  
        } else {
            clearInterval(intervalId.value); // 达到目标值后停止定时器  
        }
    }, 10); // 每10毫秒更新一次金额  
};

// 添加账户的弹窗
const showDia = ref(false);




onUnmounted(() => {
    console.log("组件卸载了");
    clearInterval(intervalId.value); // 组件卸载时清除定时器
})

</script>

<style lang="scss" scoped>
.body_statistics {
    width: 100%;
    height: 100%;
    /* background: #fff; */
    padding-bottom: 1.2821rem;

    .card_item {
        width: 100%;
        height: 3.8462rem;
        /* background-color: #b98d14; */
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        overflow: hidden;
        border-radius: .2051rem;
        margin-bottom: .2564rem;

        .card_top {
            display: flex;
            /* justify-content: center; */
            align-items: center;
            margin: .3846rem;

            .card_top_img {
                width: 1.2821rem;
                height: 1.2821rem;
                border-radius: 50%;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .card_top_name {
                margin-left: .3846rem;

                .card_top_name_name {
                    color: #fff;
                    font-size: 0.4831rem;
                }

                .totalcount {
                    .totaltitle {
                        font-size: 0.2564rem;
                        color: #fff;
                    }

                    .number {
                        font-size: .3077rem;
                        font-family: DINPro-Medium, DINPro;
                        font-weight: 500;
                        color: #16d5db;
                    }
                }
            }

        }

        .total {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
            grid-gap: 0.2564rem;
            justify-items: center;
            margin-top: 0.5128rem;

            .totalcount {
                .totaltitle {
                    font-size: 0.2564rem;
                    color: #fff;
                }

                .number {
                    font-size: .4615rem;
                    font-family: DINPro-Medium, DINPro;
                    font-weight: 500;
                    color: #16d5db;
                }
            }
        }
    }

    .heard {
        height: 3.0769rem;
        background-color: #3eb575;
        overflow: hidden;

        .title {
            color: #fff;
            display: inline-block;
            font-size: 0.4831rem;
            margin: 15px 0 0 15px;
        }

        .money {
            color: #fff;
            font-size: 0.4831rem;
            margin: 15px 0 0 15px;
            display: flex;
            align-items: center;

            .money_num {
                transition: all 1s ease-in-out;
                /* 平滑过渡效果 */
                /* 金色 */
                color: #FFD700;
                font-size: .641rem;
                /* margin-left: .3077rem; */
                font-family: 'Roboto', sans-serif;
                /* 使用Roboto字体 */
                text-decoration: underline; //text-decoration属性控制文本的修饰。我们可以使用该属性来添加千位分隔符。
            }

        }
    }

    .card_list {
        padding: .2564rem;
        background-color: #EDEDED;
        padding-bottom: 1.2821rem;

        .card_item {
            width: 100%;
            height: 3.8462rem;
            /* background-color: #b98d14; */
            overflow: hidden;
            border-radius: .2051rem;

            .card_top {
                display: flex;
                /* justify-content: center; */
                align-items: center;
                margin: .3846rem;

                .card_top_img {
                    width: 1.2821rem;
                    height: 1.2821rem;
                    border-radius: 50%;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .card_top_name {
                    margin-left: .3846rem;

                    .card_top_name_name {
                        color: #fff;
                        font-size: 0.4831rem;
                    }

                    .totalcount {
                        .totaltitle {
                            font-size: 0.2564rem;
                            color: #fff;
                        }

                        .number {
                            font-size: .3077rem;
                            font-family: DINPro-Medium, DINPro;
                            font-weight: 500;
                            color: #16d5db;
                        }
                    }
                }

            }

            .total {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: auto;
                grid-gap: 0.2564rem;
                justify-items: center;
                margin-top: 0.5128rem;

                .totalcount {
                    .totaltitle {
                        font-size: 0.2564rem;
                        color: #fff;
                    }

                    .number {
                        font-size: .4615rem;
                        font-family: DINPro-Medium, DINPro;
                        font-weight: 500;
                        color: #16d5db;
                    }
                }
            }
        }
    }
}
</style>